<template>
  <div>
    <h1>第一个组件</h1>
    <div>
        <!-- 在组件模版  使用state -->
         <h1 >使用state ：{{$store.state.count}}</h1>
         <h1>使用getters:{{$store.getters.countGetter}}</h1>
         <button @click="change">mutations改变state</button>
         <button @click="acChange">actions修改state</button>
         <h1 v-for="item in $store.state.threeStore.list" :key="item">
          {{item}}
        </h1>
     
    </div>
  </div>
</template>

<script>
export default {
  name: '2304BAddressOne',

  data() {
    return {
      
    };
  },

  mounted() {
    // js使用state数据this.$store.state.属性
      console.log(this.$store.state.count)
  },

  methods: {
    change(){
      // mutations 修改state  触发commit("")方法  
      this.$store.commit("changeCount",5)
    },
    acChange(){
      // 触发actions方法修改state  
      // this.$store.dispatch("actions名字",参数)
      this.$store.dispatch("actCount",8)
    }
  },
};
</script>